<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<!--  <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script> -->
	<script type="text/javascript" src="../jquery-2.1.1.js"></script>
	<title>domManip</title>
</head>
<body>


<button id="Button1" type="button" value="button" onclick = "slowAdd()"/>普通方式创建</button>
<button id="Button2" type="button" value="button"  onclick = "fastAdd()"/>文档碎片创建</button>
<div id="test"></div>

<div id="test"></div>

<script type="text/javascript">


    function slowAdd() {
    	var time1 =( +new Date());
    	for (var i = 0; i < 5000; i++) {
    		var op = document.createElement("span");
    		var oText = document.createTextNode(i);
    		op.appendChild(oText);
    		document.body.appendChild(op);
    	}
    	document.getElementById('test').innerHTML = '<br><div>普通方式创建耗时'+ ( +new Date() - time1);
    }

    function fastAdd() {
    	var oFragmeng = document.createDocumentFragment(); //创建文档碎片
    	var time2 =( +new Date());
    	for (var i = 0; i < 5000; i++) {
    		var op = document.createElement("span");
    		var oText = document.createTextNode(i);
    		op.appendChild(oText);
    		oFragmeng.appendChild(op);
    	}
    	document.body.appendChild(oFragmeng); //最后一次性添加到document中
    	document.getElementById('test').innerHTML = '<br><div>文档碎片创建耗时'+ ( +new Date() - time2);
    }


</script>
</body>
</html>